<template>
	<div class="login-page">
		<img src="../assets/img/ban111.png" width="100%" >
		<div class="login-box">
			<div class="login-cover">
				<img src="../assets/img/logo.png" >
				<!--<img :src="this.sicon" >-->
			</div>
			<p style="width: 100%; text-align: center;">{{this.mc}}</p>
			<div class="login-input">
				<div class="form-group">
					<input type="number" class="user-name" @blur='yz'   placeholder="请输入手机号" v-model="userName" @keyup.enter="login">
				</div>
				<div class="form-group">
					<input type="password" class="user-password" placeholder="请输入密码" v-model="password" @keyup.enter="login">
				</div>
			</div>
			<p class="error">{{error}}</p>
			<button  class="login-btn" :disabled='dlan' @click="componentsShow('dldgxq')" >登录</button>
			<button  class="login-btn1"  @click="dialogTableVisible=true" >找回密码</button>
		</div>
		<el-dialog width="600px" title="找回密码" :before-close="handleClose"   :visible.sync="dialogTableVisible">
			<el-form  label-width="100px" >
			  <el-form-item label="手机号" >
			    <input v-model="sjh" type="number"  @blur='yz1'  placeholder="请输入手机号"  class="inp">
			  </el-form-item>
			  <el-form-item label="验证码">
			    <input v-model="yzm" type="number"   class="inp1">
					 <el-button v-show="show" @click="getCode"  size="small"  >获取验证码</el-button>
					 <el-button  v-show="!show" size="small"  >{{count}}</el-button>
			  </el-form-item>
			  <el-form-item label="新密码">
			    <input v-model="mm" type="password" @blur='mmyz'   class="inp">
			    <span style="font-size: 10px;color: red;">*密码至少6位数</span>
			  </el-form-item>
			  <el-form-item label="确认密码">
			    <input v-model="qrmm" type="password"  class="inp">
			  </el-form-item>
				<el-button type="primary" class="submit" @click="submit">确认修改</el-button>
			</el-form>
		</el-dialog>
        <DldgxqComponent v-if="portComponents.dldgxq.toggle" @close="componentsHide" :params="{dh:this.userName,mm:this.password}"></DldgxqComponent>
	</div>
</template>

<script type="text/javascript">
	import qs from 'qs'
	import DldgxqComponent from './dldgxq'
	import md5 from 'js-md5';
	export default {
		components: {DldgxqComponent},
		data() {
			return {
				mc:'',
				sicon:'',
				sjh:'',
				yzm:'',
				yzm1:'',
				mm:'',
				qrmm:'',
				dlan:true,
				count:'',
				show: true,
				timer: null,
				loginTilte: '登录提示',
				loginContent: '',
				dialogTableVisible:false,
				loginHint: '请重新登录',
				userName: '',
				password: '',
				error: '',
				loginBol: false,
				loading: false,
				 portComponents: {
                     dldgxq: {
                        type: 'dldgxq',
                        toggle: false,
                        params: '',
                        data: {}
                    }
               },
			}
			
		},
		created () { 
        },
		methods: {
			yz(){
				
				if(!(/^1\d{10}$/.test(this.userName))){
						this.$message.error('输入手机号不正确！');
					}else{
						this.dlan=false
					}
			},
			yz1(){
				
				if(!(/^1\d{10}$/.test(this.sjh))){
						this.$message.error('输入手机号不正确！');
					}
			},
			mmyz(){
				if(this.mm.length<6){
						this.$message.error('密码长度至少为6位数！');
					}
			},
			submit(){
				if(!this.sjh) {
					// this.error = '请输入用户名';
					this.$message.error('请输入手机号！');
				}else	if(!this.yzm) {
					// this.error = '请输入用户名';
					this.$message.error('请输入验证码！');
				} else if(this.yzm!=this.yzm1) {
					// this.error = '请输入密码';
					this.$message.error('验证码错误！');
				}else if(!this.mm) {
					// this.error = '请输入密码';
					this.$message.error('请输入新密码！');
				}else if(this.mm.length<6) {
					// this.error = '请输入密码';
					this.$message.error('密码长度至少为6位数！');
				}else if(this.mm!=this.qrmm) {
					// this.error = '请输入密码';
					this.$message.error('两次密码不一致！');
				}
				else{
//					var logininfo = JSON.parse(localStorage.logininfo);
					this.searchLoading = true;
					var params2 = qs.stringify({
						dh:this.sjh,
						mm:this.mm
					 })
					 this.axios.post(this.$store.state.api + 'ls/updatemm',  params2 )
					 .then(res => {
						 if(res.data.code==1){
							 this.$message.success(res.data.msg+'！');
							 this.handleClose()
						 }else{
							 this.$message.error(res.data.msg+'！');
						 }
					 }).catch(res => {
					 })
				}
			},
			/*async login() {
				if(!this.userName) {
					// this.error = '请输入用户名';
					this.$message.error('请输入用户名');
				} else if(!this.password) {
					// this.error = '请输入密码';
					this.$message.error('请输入密码');
				}else {
					// var params = new URLSearchParams();
					// params.append('username', this.userName);
					// params.append('password', this.password);
					var params = qs.stringify({
						username: this.userName,
						password: md5(this.password)
					})
					this.loading = true;
					this.error = '';
					this.axios.post(this.$store.state.api + 'log_in', params)
						.then(res => {
							var code = res.data.code;
							if(code == 1) {
								this.$store.state.isLogin = 100
									this.loginBol = true;
									// 写登录信息
									localStorage.setItem('logininfo',JSON.stringify(res.data.data.list[0]))
									var data1 = JSON.parse(localStorage.logininfo)
//									this.messageAlert();
							} else {
								this.loading = false;
								this.loginContent = res.data.msg
//								this.messageAlert();
							}
						}).catch(res => {
							this.loading = false;
							this.loginContent = '登录出错'
//							this.messageAlert();
						})
				}
			},*/

//			messageAlert() {
//				if(this.loginBol) {
//					this.$router.push({ path: '/index' })
//				} else {
//					this.$alert(this.loginContent, this.loginTilte, {
//						confirmButtonText: '确定',
//						callback: action => {
//							if(this.loginBol) {
//								this.$router.push({ path: '/index' })
//							} else {
//								this.$message({
//									type: 'info',
//									message: this.loginHint
//								});
//							}
//						}
//					});
//				}
//
//			},
				getCode(){
					if(!(/^1\d{10}$/.test(this.sjh))){
						this.$message.error('输入手机号不正确！');
					}else{
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							 } else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							 }
							}, 1000)
						 }
//						 var logininfo = JSON.parse(localStorage.logininfo);
						 this.searchLoading = true;
						 var params2 = qs.stringify({
							 dh:this.sjh
							})
						//执行
							this.axios.post(this.$store.state.api + 'ls/yzm',  params2 )
							.then(res => {
								if(res.data.code==1){
									this.yzm1 = res.data.data
								}else{
									this.$message.error(res.data.msg+'！');
								}

							}).catch(res => {
							})
					}
        },
				handleClose(){
					this.sjh=""
					this.yzm=""
					this.mm=""
					this.qrmm=""
					this.dialogTableVisible=false
				},
				 /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id
                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;
                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
            componentsHide (setting) { //关闭组件
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;
                        if (!setting.cancel) {
                        }
                        return;
                    }
                }
            }
        },
		}
</script>

<style lang="less" scoped>
	.login-page {
		width: 100%;
		height: 100%;
		position: relative;
	    /*background-image: url(../assets/img/ban111.png);
		background-size: 100% 100%;*/
		
		.login-box {
			width: 300px;
			position: fixed;
			/*position: absolute;*/
			top: 50px;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 99;
		}
		.login-cover {
			text-align: center;
			font-size: 0;
			width: 200px;
			margin: 0 auto;
			border-radius: 50%;

		}
		.login-input input{
			width: 300px;
			height: 10%;
			border: none;
			background: none;
			text-align: center;
		}
		.login-btn {
			width: 30%;
			margin-left: 20%;
			height: 50px;
			color: #5F6160;
			font-size: 15px;
			border: none;
			border-radius: 20px;
			background-image: url(../assets/img/yun2.png);
			background-size: 100%;
		}
		.login-btn1 {
			width: 30%;
			height: 50px;
			color: #5F6160;
			font-size: 15px;
			border: none;
			border-radius: 20px;
			background-image: url(../assets/img/yun2.png);
			background-size: 100%;
		}
		@media screen and (min-height: 500px) {
			.login-box {
				width: 300px;
				position: fixed;
				top: 10%;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 99;
			}
			.login-cover {
				text-align: center;
				font-size: 0;
				width: 250px;
				height: 250px;
				// background: #EFEFEF;
				margin: 0 auto;
				padding-top: 70px;
				border-radius: 50%;
	
			}
			.login-input input{
				width: 300px;
				height: 40px;
				border: none;
				background: none;
				// margin-left: 20%;
				text-align: center;
			}
			.login-btn {
				width: 30%;
				margin-left: 20%;
				height: 50px;
				margin-top: 20px;
				color: #5F6160;
				font-size: 15px;
				border: none;
				border-radius: 20px;
				background-image: url(../assets/img/yun2.png);
				background-size: 100%;
				// transition: all .5s;
			}
			.login-btn1 {
				width: 30%;
				height: 50px;
				margin-top: 20px;
				color: #5F6160;
				font-size: 15px;
				border: none;
				border-radius: 20px;
				background-image: url(../assets/img/yun2.png);
				background-size: 100%;
			}
		}
		// .login-input input[type=text],
		// .login-input input[type=password] {
		// 	display: block;
		// 	width: 300px;
		// 	padding: 6px 12px;
		// 	line-height: 1.42857;
		// 	color: #000;
		// 	background-color: #878988;
		// 	background-image: none;
		// 	border: 1px solid #c2cad8;
		// 	// border-radius: 4px;
		// 	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		// 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		// 	-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		// 	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		// 	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		// 	background: 0 0;
		// 	text-indent: .5rem;
		// 	border: 0;
		// 	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		// 	-webkit-border-radius: 0;
		// 	-moz-border-radius: 0;
		// 	-ms-border-radius: 0;
		// 	-o-border-radius: 0;
		// 	border-radius: 0;
		// 	color: #fff;
		// 	box-shadow: none;
		// 	padding-left: 0;
		// 	padding-right: 0;
		// 	font-size: 14px;
		// 	outline: none;
		// }
		
		.error {
			width: 100%;
			height: 15px;
			font-size: 12px;
			color: #f00;
			text-align: center;
			margin-top: 10px;
		}
		.login-input .form-group {
			margin-top: 15px;
		}
		.login-check-box {
			margin-top: 15px;
		}
		.el-button {
			border-radius: 0px;
		}
		
		.login-btn:hover {
			background: #b5b5b5;
			border: 1px solid #b5b5b5;
			color: #4d6b8a;
		}
		.login-btn1:hover {
			background: #b5b5b5;
			border: 1px solid #b5b5b5;
			color: #4d6b8a;
		}
		.submit {
			width: 120px;
			display: block;
			// float: left;
			margin: 0 auto;
			margin-top: 20px;
		}
		.inp{
			width: 300px;
			height: 30px;
			/*outline: none;*/
			border: 1px solid #CCCCCC;
			background: none;
			// margin-left: 20%;
			text-align: center;
			
		}
		.inp1{
			width: 200px;
			height: 30px;
			/*outline: none;*/
			border: 1px solid #CCCCCC;
			background: none;
			// margin-left: 20%;
			text-align: center;
		}
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button{
        -webkit-appearance: none !important;
        }
        input[type="number"]{
        	-moz-appearance:textfield;
        	}
	}
</style>
